<!DOCTYPE html>
<html>

<head>
    <title>文章排版工具</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 添加Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/default.min.css">
    <!-- 添加Markdown.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <!-- 预加载关键CSS -->
    <link rel="preload" href="/static/css/style.css" as="style">
    <link rel="stylesheet" href="/static/css/style.css" media="print" onload="this.media='all'">
    <!-- 引入外部JS文件 -->
    <!-- 移除head中的script标签 -->
</head>

<body>
    <!-- 页面结构保持不变 -->
    <nav class="navbar" aria-label="主要导航">
        <div class="nav-container">
            <a href="#home" class="nav-item active" aria-current="page">首页</a>
            <a href="#single" class="nav-item">单篇转换</a>
            <a href="#batch" class="nav-item">批量转换</a>
        </div>
    </nav>

    <!-- 首页模板缩略图 -->
    <div id="home" class="form-section active">
        <h2>信息模板</h2>
        <div class="template-container">
            {% for template in templates if template.startswith('template') %}
            <div class="template-thumbnail" onclick="selectTemplate('{{ template }}')">
                <!-- 修改图片标签 -->
                <img src="/static/thumbnails/{{ template }}.png" loading="lazy" alt="{{ template }}模板" 
                     onerror="this.src='/static/thumbnails/default.png';this.onerror=null;">
                <p>{{ template }}</p>
            </div>
            {% endfor %}
        </div>

        <h2 class="article-section">文章样式</h2>
        <div class="template-container">
            {% for template in templates if template.startswith('article') %}
            <div class="template-thumbnail" onclick="selectTemplate('{{ template }}')">
                <img src="/static/thumbnails/{{ template }}.png" alt="{{ template }}模板"
                    onerror="this.src='/static/thumbnails/default.png';this.onerror=null;">
                <p>{{ template }}</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 单条转换表单 -->
    <!-- 修改单条转换表单部分 -->
    <div id="single" class="form-section">
        <form action="/generate" method="post" enctype="multipart/form-data">
            <input type="hidden" name="template" id="selectedTemplate">

            <div class="form-group">
                <label for="content">文章内容</label>
                <div style="display: flex; gap: 10px; margin-bottom: 5px; flex-wrap: wrap;">
                    <button type="button" aria-label="加粗" onclick="insertMarkdown('**','**')">
                        <i class="fas fa-bold"></i>
                    </button>
                    <button type="button" onclick="insertMarkdown('*','*')" title="斜体"><i class="fas fa-italic"></i></button>
                    <button type="button" onclick="insertMarkdown('# ','')" title="标题1"><i class="fas fa-heading"></i></button>
                    <button type="button" onclick="insertMarkdown('## ','')" title="标题2"><i class="fas fa-heading" style="font-size: 0.8em;"></i></button>
                    <button type="button" onclick="insertMarkdown('- ','')" title="列表"><i class="fas fa-list-ul"></i></button>
                    <button type="button" onclick="insertMarkdown('> ','')" title="引用"><i class="fas fa-quote-right"></i></button>
                    <button type="button" onclick="insertMarkdown('`','`')" title="代码"><i class="fas fa-code"></i></button>
                    <button type="button" onclick="insertMarkdown('[链接文字](',')')" title="链接"><i class="fas fa-link"></i></button>
                </div>
                <textarea id="content" name="content" required oninput="previewMarkdown()"></textarea>
                <!-- 修改预览区域样式 -->
                <div id="markdown-preview" class="markdown-preview"></div>
            </div>
            <div style="text-align: center;">
                <button type="submit" name="action" value="wenpian">转换复制</button>
            </div>
        </form>
    </div>

    <script>
        // 配置Marked.js
        marked.setOptions({
            breaks: true,
            gfm: true,
            highlight: function (code) {
                return hljs.highlightAuto(code).value;
            }
        });

        // 增强的Markdown预览功能
        function previewMarkdown() {
            const content = document.getElementById('content').value;
            const preview = document.getElementById('markdown-preview');

            if (content.trim()) {
                preview.style.display = 'block';
                preview.innerHTML = marked.parse(content);
            } else {
                preview.style.display = 'none';
            }
        }

        // 转换并复制到剪贴板
        function convertAndCopy() {
            const template = document.getElementById('selectedTemplate').value;
            const content = document.getElementById('content').value;

            // 这里调用后端API进行转换
            fetch('/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    template: template,
                    content: content,
                    action: 'wenpian'
                })
            })
                .then(response => response.text())
                .then(html => {
                    // 复制转换后的HTML到剪贴板
                    navigator.clipboard.writeText(html)
                        .then(() => alert('转换成功，内容已复制到剪贴板！'))
                        .catch(err => console.error('复制失败:', err));
                })
                .catch(error => console.error('转换失败:', error));

            // 阻止表单默认提交
            return false;
        }
    </script>

    <!-- 批量转换表单 -->
    <div id="batch" class="form-section">
        <form action="/generate" method="post" enctype="multipart/form-data">
            <input type="hidden" name="template" id="batchSelectedTemplate">
            <div class="form-group">
                <label>上传文件(JSON或TXT)</label>
                <input type="file" name="upload_file" accept=".json,.txt" required>
            </div>
            <button type="submit">一键转换</button>
        </form>
    </div>

    <footer>
        &copy; 2025 微信公众号文章排版工具 - 版权所有
    </footer>

    <script>
        // 导航切换
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                });
                this.classList.add('active');

                // 显示对应的表单部分
                const target = this.getAttribute('href').substring(1);
                document.querySelectorAll('.form-section').forEach(section => {
                    section.classList.remove('active');
                });
                document.getElementById(target).classList.add('active');
            });
        });

        // 选择模板
        function selectTemplate(template) {
            document.getElementById('selectedTemplate').value = template;
            document.getElementById('batchSelectedTemplate').value = template;
            document.querySelector('.nav-item[href="#single"]').click();
        }
        // 在表单提交时添加
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', function () {
                const button = this.querySelector('button[type="submit"]');
                button.disabled = true;
                button.innerHTML = '处理中...';
            });
        });
    </script>
</body>

</html>

<!-- 在body底部添加脚本 -->
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/lib/highlight.min.js" defer></script>
<script src="/static/js/main.js" defer></script>